<template>
	<div class="app">
		<!-- 顶部栏 -->
		<div class="top">
			<div class="left">
				<a href="#">小米商城</a>
				<a href="#">MIUI</a>
				<a href="#">loT</a>
				<a href="#">云服务</a>
				<a href="#">金融</a>
				<a href="#">有品</a>
				<a href="#">小爱开放平台</a>
				<a href="#">政企服务</a>
				<a href="#">资质证照</a>
				<a href="#">协议规则</a>
				<a href="#"><el-popover
    placement="bottom"
    width="150"
    trigger="hover">
    <div class="show">
    	<img src="../images/download.png" width='100%'>
    	小米商城APP
    </div>
    <el-button slot="reference">下载app <i class="el-icon-caret-bottom"></i></el-button>
  </el-popover></a>
				<span href="#">Select Region</span>
			</div>
			<div class="right">
				<a href="#">登录</a>
				<a href="#">注册</a>
				<a href="#">消息通知</a>
				<span href="#" class="shopCar"><i class="el-icon-goods"></i> 购物车(0)</span>
			</div>
		</div>
		<!-- 导航栏-Lorin -->
		<div class="Lorin_navBar" @mouseleave='hide_list'>
			<a href="/"><img src="../images/logo.png"></a>
			<ul class="Lorin_goods">
				<li @mouseenter='show_list("xmsj")'>小米手机</li>
				<li @mouseenter='show_list("hm")'>红米</li>
				<li @mouseenter='show_list("ds")'>电视</li>
				<li @mouseenter='show_list("bjb")'>笔记本</li>
				<li @mouseenter='show_list("jd")'>家电</li>
				<li @mouseenter='show_list("xp")'>新品</li>
				<li @mouseenter='show_list("lyq")'>路由器</li>
				<li @mouseenter='show_list("znyj")'>智能硬件</li>
				<li>服务</li>
				<li>社区</li>
			</ul>
			<el-input
    			placeholder="请输入内容"
    			prefix-icon="el-icon-search"
   			 	v-model="input21">
  			</el-input>
  			<transition name='goods_list'>
  				<div class="Lorin_goods_list" v-if='goods_list' @mouseleave='hide_list'>
  				<div v-for='item in navImgList'>
  					<img :src="'http://129.204.193.180:8080' + item.url">
  					<p>{{item.info}}</p>
  					<p>{{item.price}}元</p>
  				</div>
  			</div>
  			</transition>
		</div>

		<!-- 主区域-Lorin -->
		<router-view></router-view>
		<!-- /主区域-Lorin -->

		<!-- 底部脚注区域-吕联灿 -->
		<div id="llc">
			<div class="llc1">
  <div class="llc2">
    <div class="llc3">
      <ul class="llc-list">
        <li><a ><i class="font el-icon-setting"></i>预约维修服务</a></li>
        <li><a ><i class="font el-icon-printer
"></i>7天无理由退货</a></li>
        <li><a ><i class="font el-icon-refresh"></i>15天免费换货</a></li>
        <li><a ><i class="font el-icon-message"></i>满150元包邮</a></li>
        <li><a ><i class="font el-icon-share"></i>520余家售后网点</a></li>
      </ul>
    </div>
    <div class="llc-links">
      <dl class="llc-links1">
        <dt>帮助中心</dt>
        <dd><a >账户管理</a></dd>
        <dd><a >购物指南</a></dd>
        <dd><a >订单操作</a></dd>
      </dl>
      <dl class="llc-links1 ">
        <dt>服务支持</dt>
        <dd><a >售后政策</a></dd>
        <dd><a >自助服务</a></dd>
        <dd><a >相关下载</a></dd>
      </dl>
      <dl class="llc-links1 ">
        <dt>线下门店</dt>
        <dd><a >小米之家</a></dd>
        <dd><a>服务网点</a></dd>
        <dd><a >授权体验店</a></dd>
      </dl>
      <dl class="llc-links1 ">
        <dt>关于小米</dt>
        <dd><a >了解小米</a></dd>
        <dd><a >加入小米</a></dd>
        <dd><a >投资者关系</a></dd>
      </dl>
      <dl class="llc-links1 ">
        <dt>关注我们</dt>
        <dd><a >新浪微博</a></dd>
        <dd><a >官方微信</a></dd>
        <dd><a >联系我们</a></dd>
      </dl>
      <dl class="llc-links1 ">
        <dt>特色服务</dt>
        <dd><a >F 码通道</a></dd>
        <dd><a >礼物码</a></dd>
        <dd><a>防伪查询</a></dd>
      </dl>
      <div class="llc-contact">
        <p class="phone">400-100-5678</p>
        <p> 周一至周日 8:00-18:00<br>
          （仅收市话费） </p>
        <a class="btn-line-primary"><i class="font"></i> 联系客服</a> </div>
    </div>
  </div>
</div>
<div class="site-info">
<div class="container">
  <div class="ir">小米官网</div>
  <br>
  <div class="info-text">
 
    <p class="sites">
   <a>小米商城</a><span class="sep">|</span><a>MIUI</a><span class="sep">|</span><a >米家</a><span class="sep">|</span><a >米聊</a><span class="sep">|</span><a >多看</a><span class="sep">|</span><a>游戏</a><span class="sep">|</span><a >路由器</a><span class="sep">|</span><a >米粉卡</a><span class="sep">|</span><a >政企服务</a><span class="sep">|</span><a >小米天猫店</a><span class="sep">|</span><a>隐私政策</a><span class="sep">|</span><a >商城用户协议</a><span class="sep">|</span><a >账号协议</a><span class="sep">|</span><a >问题反馈</a><span class="sep">|</span><a >廉正举报</a><span class="sep">|</span><a >诚信合规</a><span class="sep">|</span><a>Select Region</a> </p>
    <p>© <a >mi.com</a> 京ICP证110507号 <a >京ICP备10046444号</a> <a >京公网安备11010802020134号 </a> <a >京网文[2017]1530-131号</a> <br>
      <a >（京）网械平台备字（2018）第00005号 </a> <a>互联网药品信息服务资格证 (京) -非经营性-2014-0090 </a> <a >营业执照</a> <a >医疗器械公告</a> <br>
      <a >增值电信业务许可证</a>&nbsp;
      网络食品经营备案（京）【2018】WLSPJYBAHF-12  &nbsp; <a >食品经营许可证</a> <br>
      违法和不良信息举报电话：185-0130-1238 <a >知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  </div>
  <div class="slogan ir">探索黑科技，小米为发烧而生</div>
</div>
</div>
		</div>
		<!-- /底部脚注区域 -->
	</div>
</template>

<script type="text/javascript">
	export default{
		data() {
			return {
				goods_list: 0,
				navImgList: []
			}
		},
		methods: {
			show_list(kind) {
				this.goods_list = 1;
				this.$http.get('http://129.204.193.180:8080/navimg?kind=' + kind).then(function(res) {
					this.navImgList = JSON.parse(res.body.resBody.data)
				})
			},
			hide_list() {
				this.goods_list = 0;
			}
		}
	}
</script>

<style lang="less">
	*{
		margin: 0;
		padding:0;
		box-sizing: border-box;
	}
	ul{list-style: none;}
	a{text-decoration: none;}
	.app{
		margin: 0 auto;
		max-width: 1366px;
		padding: 0 3%;
		.top{
			width:100%;
			height:40px;
			background-color: #333;
			line-height: 40px;
			padding: 0 10px;
			.left{float: left;}
			.right{float: right;}
			a,span{color:#b0b0b0;font-size: 12px;}
			a::after{
				display: inline-block;
				content:' ';
				height:10px;
				border-right: 1px solid #ccc;
				margin-left: 5px;
				opacity: .2;
			}
			.shopCar{width:100px;height:39px;background-color: #424242;display: inline-block;text-align: center;}
			.shopCar:hover{background-color: #fff;color:#ff6700;cursor:pointer;}
		}
		.Lorin_navBar{
			height: 100px;
			padding: 20px 0;
			.el-input{
				float: right;
				width:25%;
			}
			.el-input__inner{
				height:50px;
			}
			.Lorin_goods{
				display: inline-block;
				width:55%;
				height:50px;
				margin-left: 5%;
				li{float:left;height:50px;line-height: 50px;color:#333;cursor: pointer;font-size: 16px;margin-left: 2%;}
				li:hover{color: #ff6700;}
			}
			.Lorin_goods_list{
				position: absolute;
				z-index: 999;
				left:0;
				margin-top:20px;
				width:100%;
				height:230px;
				padding:25px 5%;
				box-shadow: 0 4px 3px #ccc;
				background-color: #fff;
				div{
					width:16%;
					display: inline-block;
					text-align: center;
					cursor: pointer;
					img{width:100%;}
					p{font-size: 12px;margin-top: 10px;}
					p:nth-of-type(2){color:#ff6700;}
				}
				div::after{display: block; content: ' '; border-right: 1px solid #ccc; height:100px;margin-top: -160px;}
			}
			.goods_list-enter,
			.goods_list-leave-to{
				opacity: 0;
			}
			.goods_list-enter-active,
			.goods_list-leave-active{
				transition: opacity 0.5s;
			}
		}
	}
	.show{text-align: center;}
	@media screen and (max-width:1024px) {
		.app .Lorin_navBar .Lorin_goods {
			display: none;
		}
		.app{padding: 0 2%;}
		.app > .top{display: none;}
		#llc{display: none;}
	}

	/* 底部区域-吕联灿 */
	#llc{
		margin-top: 800px;
	}
	.llc1 .llc3 {
	padding: 27px 0;
	border-bottom: 1px solid #e0e0e0
}
.llc1 .llc-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.llc1 .llc-list li {
	float: left;
	width: 19.8%;
	height: 25px;
	border-left: 1px solid #e0e0e0;
	font-size: 16px;
	line-height: 25px;
	text-align: center
}
.llc1 .llc-list li:first-child {
	border-left: 0
}
.llc1 .llc-list .font {
	margin-right: 6px;
	font-size: 24px;
	line-height: 24px;
	vertical-align: -4px
}
.llc1 .llc-list a {
	color: #616161;
	transition: color .2s
}
.llc1 .llc-list a:hover {
	color: #ff6700
}
.llc1 .llc-links {
	padding: 40px 0
}
.llc1 .llc-links .llc-links1 {
	float: left;
	width: 13.4%;
	height: 112px;
	margin: auto;
	text-align:center;
	
}
.llc1 .llc-links .llc-links1 dt {
	margin: -1px 0 26px;
	font-size: 14px;
	line-height: 1.25;
	color: #424242
}
.llc1 .llc-links .llc-links1 dd {
	margin: 10px 0 0;
	font-size: 12px
}
.llc1 .llc-links .llc-links1 a {
	color: #757575
}
.llc1 .llc-links .llc-links1 a:hover {
	color: #ff6700
}
.llc1 .llc-links .llc-contact {
	float: right;
	width: 251px;
	height: 112px;
	border-left: 1px solid #e0e0e0;
	text-align: center;
	color: #616161
}
.llc1 .llc-links .llc-contact {
	float: right;
	width: 251px;
	height: 112px;
	border-left: 1px solid #e0e0e0;
	text-align: center;
	color: #616161
}
.llc1 .llc-links .llc-contact p {
	margin: 0 0 16px;
	font-size: 12px
}
.llc1 .llc-links .llc-contact .phone {
	margin: 0 0 5px;
	font-size: 22px;
	line-height: 1;
	color: #ff6700
}
.site-info {
	font-size: 12px;
	background: #fafafa;
	display: block;
	margin-top:100px;
 
}
.site-info .container {
	position: relative
}
.site-info .logo {
	width: 57px;
	height: 57px;
	margin-right: 10px;
	position: absolute;
	top: 0;
	left: 0
}
.site-info .info-text {
	color: #b0b0b0;
	padding-left: 67px;
	width:80%;
	margin-left:50px;
}
.info-text{
	margin-top:20px;
}
.site-info .info-text p {
	margin: 0;
	line-height: 18px
}
.site-info .info-text a {
	color: #b0b0b0
}
.site-info .info-text a:hover {
	color: #ff6700
}
.site-info .info-text .sites a {
	color: #757575
}
.site-info .info-text .sites a:hover {
	color: #ff6700
}
.site-info .info-links {
	height: 28px;
	margin: 4px 0 0;
	padding-left: 67px;
	border:1px solid red;
}
.site-info .info-links img {
	width: auto;
	height: 28px;
	margin-left: 0px;
	margin-bottom: 15px
}
.site-info .slogan {
	clear: both;
	margin: 30px auto 0;
	width: 267px;
	height: 19px;
}
.ir {
	display: block;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
}
.sep {
	margin: 0.25em;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	/* /底部区域-吕联灿 */
</style>